<template>
	<el-dialog v-model="dialogState" :width="modelWidth" :z-index="9" top="10vh" :close-on-click-modal="false" class="dialog" @closed="handleClose">
		<template #header>
			<div class="custom-header">{{ modalTitle }}</div>
		</template>
		<div class="custon-body">
			<slot />
		</div>
		<template #footer>
			<slot name="footer" />
		</template>
	</el-dialog>
</template>
<script lang="ts" setup>
import { computed } from 'vue'
const props = defineProps({
	modelValue: Boolean,
	modelWidth: {
		type: String,
		default: '800px'
	},
	modalTitle: {
		type: String,
		default: ''
	}
})

const emit = defineEmits(['update:modelValue'])

const dialogState = computed({
	get: () => props.modelValue,
	set: val => emit('update:modelValue', val)
})

const handleClose = () => {
	// 关闭时的清理操作
}
</script>
<style lang="scss" scoped>
.custon-body {
	max-height: 72vh;
	overflow: auto;
}
.dialog-header {
	width: 100%;
	height: 48px;
	background-color: rgba(51, 51, 51, 0.1);
	display: flex;
	align-items: center;
	justify-content: space-between;

	.title {
		font-size: 14px;
		color: #333;
		margin-left: 16px;
		font-weight: bold;
	}

	.close {
		margin-right: 16px;
		cursor: pointer;
	}
}
</style>
